<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>SuperBook-Booking Gone Online </title>
<script type="text/javascript"
	src="<%=request.getContextPath()%>/js/jquery-1.9.1.js"></script>
<script type="text/javascript"
	src="<%=request.getContextPath()%>/js/jquery-ui.js"></script>
	<script type="text/javascript"
	src="<%=request.getContextPath()%>/js/jquery-ui-1.10.3.custom.js"></script>
 <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
 <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/vader/jquery-ui.css" />
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/css/default.css">
<style>
#accordion-resizer {
	padding: 10px;
	width: 100%;
	height: 400px;
}
</style>
<script>
	$(function() {
		$("#accordion").accordion({
			heightStyle : "content"
		});
	});
	$(function() {
		$("#accordion-resizer").resizable({
			minHeight : 140,
			minWidth : 200,
			resize : function() {
				$("#accordion").accordion("refresh");
			}
		});
	});
	
	 $(function() {
		 $( "#tabs" ).tabs({
		 event: "mouseover",
			heightStyle : "auto"
		 });
	 });
	
	$(function() {
		var arrCities = ["Ahmedabad",
		                 "Amritsar",		                 
		                 "Bangalore",
		                 "Chandigarh",
		                 "Chennai",
		                 "Delhi",
		                 "Hyderabad",
		                 "Jaipur",
		                 "Lucknow",
		                 "Mumbai",
		                 "Mysore",
		                 "Nagpur",
		                 "Patna",
		                 "Pune",
		                 "Raipur"];
		var arrArea = ["Aundh",
		               "Baner",
		               "Chinchwad",
		               "Hinjewadi",
		               "Kalyani Nagar",
		               "Koregaon Park",
		               "Pimple Gurav",
		               "Pimple Nilakh",
		               "Pimple Saudagar"
		               ];
		$("#citi").autocomplete({
			source: arrCities
		});
		$("#area").autocomplete({
			source: arrArea
		});
		
		
	});

	
</script>
</head>
<body class="body">
	<div class="mainDiv">
		<div class="mainHeader">
		<img alt="SB" src="<%=request.getContextPath()%>/images/sb.jpg" style="left: 0;top: 0" height="100" width="150"></img>
			<h3  style="color: black; left: 190;font-family: cursive;font-style: normal;">SuperBook-Booking Gone Online</h3>
		</div>
		<div id="tabs">
<ul>
<li><a href="#tabs-1">Home</a></li>
<li><a href="#tabs-2">Book Now</a></li>
<li><a href="#tabs-3">How it Works</a></li>
<li><a href="#tabs-4">Business Registration</a></li>
<li><a href="#tabs-5">Offers and Promotions</a></li>
<li><a href="#tabs-6">About Us</a></li>
</ul>
<div id="tabs-1">
<p></p>
</div>
<div id="tabs-2">
	
		<div id="twoColumn">
			<div id="accordion-resizer" class="ui-widget-content">
				<div id="accordion">
					<h4>Restaurant Information</h4>
					<div id="restInfo">
						<div class="ui-widget">
							<label for="City" class="commonLabel">City: </label> 
							<input id="citi" class="commonValue"/><br/>
							<label for="Area" class="commonLabel">Area: </label> 
							<input id="area" class="commonValue"/><br/>
						</div>



					</div>
					<h4>Personal Information</h4>
					<div id="personalInfo">
							
					</div>
					<h4>Payment Information</h4>
					<div id="paymentInfo">
						
					</div>
				</div>
			</div>
		
		</div>
	
</div>
<div id="tabs-3">
<p></p>
<p></p>
</div>
<div id="tabs-4">
<p></p>
</div>
<div id="tabs-5">
<p></p>
</div>
<div id="tabs-6">
<p></p>
</div>

</div>
		
		
		
		
		
		

	</div>


</body>
</html>
